---
title: Guidelines
redirect_from:
  - /components/loading/
---

<ReactExample exampleId="Loading-default" />

## When to use

- To let users know progress on their action in the UI is being made.
- To keep users from giving up on an experience.
- Especially after user input to prevent repeated action.

Read or listen to [more about progress indicators](https://99percentinvisible.org/episode/wait-wait-tell-me/).

## When not to use

- For progress on a large task with steps users should complete---use a [wizard](/components/progress-indicators/wizard/).
- For progress on a process out of their control---use a [timeline](/components/progress-indicators/timeline/).

## Component status

<ComponentStatus component="Loading" />

## Content structure

![Animation: varies based on loading type; text: optionally lets users know what's happening.](fileId:4QJZqvBvRrLu6t9mwObCkA;nodeId:89%3A0)

## Behavior

### Use the right type

Differ loading types take up different spaces
and create certain expectations in users.
Choose the loading type to correspond to the content that's being loaded.

<ReactExample exampleId="Loading-types" />

## Content

### Let users know what's happening

Loading components help show users progress is being made.
Make it clear where the progress is leading with helpful text
indicating what's coming or what action is being taken.

<ReactExample exampleId="Loading-text" />
